<template>
	<view class="kf">
		<view class="cntbox mt28">
			<view class="tit">猜你想问</view>
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="title" @click="showIt(item)">
					<text class="tit-txt">{{item.title}}</text>
					<image class="tit-iconimg" :src="item.show ? arrowupIcon : arrowdownIcon" mode="widthFix"></image>
				</view>
				<view class="content" v-show="item.show">{{item.content}}</view>
			</view>
		</view>

		<view class="cntbox mt28">
			<view class="tit">联系我们</view>
			<view class="blo mt28">手机号：15336570084</view>
			<view class="blo">微信号：upsp001</view>
			<view class="blo mt28">微信搜索进入“优品速拍”小程序点击【我的】-【我的客服】咨询客服。或者点击 <text class="link">在线客服</text> </view>
		</view>

		<view class="mt28" style="height: 140rpx;"></view>

		<view class="btnbox">
			<!-- #ifdef MP-WEIXIN -->
			<button class="btn" type="default" open-type="contact">在线客服</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<button class="btn" type="default" @click="call">在线客服</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	let list = [{
		title: "平台充值保证金是什么意思？",
		content: "在平台拼购功能里所有商品都需要交纳一定的保证金才能参与,充值方式支付宝微信均可"
	}, {
		title: "充值的保证金安全吗？",
		content: "在平台充值的保证金直接进入个人在平台的账户,可以随时提现无需手续费,非常安全"
	}, {
		title: "保证金为什么会被冻结？",
		content: "用户在平台参与了者拼购时,平台会暂时冻结对应商品的保证金,到该商品拼购结束时如未能够得该商品保证金将自动退还到用户保证金账户取消冻结,如成功拍中本商品,保证金将继续冻结24小时"
	}, {
		title: "拍到的商品为什么没了保证金也没了？",
		content: "用户在平台拍中商品后应及时缴纳拍中商品的尾款平台每件拼购商品结束后均保留24小时的支付期限,如未能及时支付尾款,平台将视为违约违约金为参与时所缴纳的保证金。"
	}, {
		title: "平台产生的红包怎么理解？",
		content: "在优品速拍平台购物,每个商品均有现金红包产生,红包直接充值到用户红包中,可以消费可以提现。"
	}, {
		title: "红包如何提现？",
		content: "微信小程序暂不支持红包提现，请下载APP进行提现"
	}, {
		title: "平台的商品如何保真？",
		content: "优品速拍所有品牌类商品均获得品牌方官方授权保证假一题三,售后追溯品牌方均能支持"
	}, {
		title: "通用券怎么使用？",
		content: "参与拼购时选择使用通用券抵扣需缴纳的保证金,超过保证金部分可以用于抵扣尾款,超过商品总额时在支付尾款时支付0.01元。未购中时系统将为您退还当前场次选择使用的通用券,建议选择拍中即止场使用。"
	}, {
		title: "通用券怎么合成？",
		content: "选择2张或多张通用券进行合成,合成后的通用券面额为选择的通用券面额相加,有效时间为合成的通用券里时间最早的张,注意在有效期内使用, 注: 已合成的通用券无法进行拆分"
	}]
	list.map(item => {
		item.show = false
	})
	export default {
		data() {
			return {
				arrowdownIcon: `${this.IMGLink}/my/kf_arrowdown.png`,
				arrowupIcon: `${this.IMGLink}/my/kf_arrowup.png`,
				list: list
			}
		},
		methods: {
			showIt(obj) {
				obj.show = !obj.show
			},
			call() {
				this.$Toast.none("暂未开放")
				// uni.makePhoneCall({
				// 	phoneNumber: '114' //仅为示例
				// });
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style scoped>
	.kf {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.cntbox {
		width: 100%;
		height: auto;
		overflow: hidden;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 28rpx 24rpx;
		position: relative;
		background-color: white;
	}

	.tit {
		width: 164rpx;
		height: 58rpx;
		background: linear-gradient(90deg, #FB7C77 0%, #F54642 100%);
		border-radius: 0px 8rpx 8rpx 0px;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 58rpx;
		text-align: center;
	}

	.item {
		height: auto;
		border-bottom: 1px dashed #E3E3E3;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 76rpx;
	}

	.tit-txt {
		font-size: 28rpx;
		color: #010101;
	}

	.tit-iconimg {
		width: 24rpx;
		height: 24rpx;
	}

	.content {
		font-size: 24rpx;
		color: #828282;
		line-height: 36rpx;
		padding-bottom: 18rpx;
	}

	.blo {
		font-size: 26rpx;
		color: #010101;
		line-height: 40rpx;
	}

	.mt28 {
		margin-top: 28rpx;
	}

	.link {
		color: #7C8FE0;
	}

	.btnbox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
	}

	/deep/ button[type=default] {
		background-color: #F54642;
		color: white;
	}

	.btn {
		margin: 36rpx auto 0;
		width: 89.3%;
		height: 80rpx;
		line-height-step: 80rpx;
		text-align: center;
		border-radius: 80rpx;
		font-size: 32rpx;
	}
</style>
